<template>
  <div class="recommendations">
    <!-- 头部区域 -->
    <div class="recommendations-header">
      <h3 class="recommendations-title">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 16V8C21 4.13401 17.866 1 14 1H10C6.13401 1 3 4.13401 3 8V16C3 19.866 6.13401 23 10 23H14C17.866 23 21 19.866 21 16Z" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M14 9H10" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M14 13H10" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M11 17H13" stroke="var(--primary-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        商品推荐
      </h3>
      <div class="recommendations-tabs">
        <button 
          class="tab-button" 
          :class="{ 'active': activeTab === 'brands' }"
          @click="switchTab('brands')"
        >
          品牌特卖
        </button>
        <button 
          class="tab-button" 
          :class="{ 'active': activeTab === 'guess' }"
          @click="switchTab('guess')"
        >
          猜你喜欢
        </button>
      </div>
    </div>
    
    <!-- 推荐商品列表 -->
    <div class="recommendations-list">
      <div 
        class="product-item"
        v-for="product in currentProducts"
        :key="product.id"
      >
        <!-- 商品图片 -->
        <div class="product-image">
          <img :src="product.imageUrl" :alt="product.title" class="product-img">
          <span v-if="product.discount" class="discount-tag">{{ product.discount }}折</span>
        </div>
        
        <!-- 商品信息 -->
        <div class="product-info">
          <h4 class="product-title">{{ product.title }}</h4>
          
          <!-- 价格和销量 -->
          <div class="product-meta">
            <span class="price">￥{{ product.price }}</span>
            <span class="sales">月销{{ formatNumber(product.sales) }}</span>
          </div>
          
          <!-- 加入购物车按钮 -->
          <button class="add-cart-btn" @click="addToCart(product)">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 2L3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6L18 2H6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16 10C16 11.1046 15.1046 12 14 12C12.8954 12 12 11.1046 12 10C12 8.89543 12.8954 8 14 8C15.1046 8 16 8.89543 16 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 10C8 11.1046 7.10457 12 6 12C4.89543 12 4 11.1046 4 10C4 8.89543 4.89543 8 6 8C7.10457 8 8 8.89543 8 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
      <button class="load-more-btn" @click="loadMoreProducts">
        查看更多
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, computed } from 'vue';

const props = defineProps({
  brandsProducts: {
    type: Array,
    default: () => [
      { id: 1, title: '华为 Mate 60 Pro 5G手机 8GB+256GB', imageUrl: 'https://dummyimage.com/200x200/FF6B6B/ffffff&text=华为手机', price: '6999.00', sales: 12500, discount: 9.5 },
      { id: 2, title: 'Apple iPhone 15 Pro 256GB 暗紫色', imageUrl: 'https://dummyimage.com/200x200/4ECDC4/ffffff&text=iPhone', price: '8999.00', sales: 8900 },
      { id: 3, title: '小米14 徕卡光学镜头 120W快充', imageUrl: 'https://dummyimage.com/200x200/FFD166/ffffff&text=小米手机', price: '4299.00', sales: 15600, discount: 9.0 },
      { id: 4, title: 'OPPO Find X7 Ultra 骁龙8 Gen 3', imageUrl: 'https://dummyimage.com/200x200/06D6A0/ffffff&text=OPPO手机', price: '5999.00', sales: 7800 },
    ]
  },
  guessProducts: {
    type: Array,
    default: () => [
      { id: 101, title: '索尼 WH-1000XM5 无线降噪耳机', imageUrl: 'https://dummyimage.com/200x200/118AB2/ffffff&text=索尼耳机', price: '2999.00', sales: 5600, discount: 8.5 },
      { id: 102, title: '戴森 V12 Detect Slim 无线吸尘器', imageUrl: 'https://dummyimage.com/200x200/073B4C/ffffff&text=戴森吸尘器', price: '4990.00', sales: 3200 },
      { id: 103, title: '小米手环8 Pro 智能运动手环', imageUrl: 'https://dummyimage.com/200x200/FFD166/ffffff&text=小米手环', price: '349.00', sales: 25800, discount: 9.2 },
      { id: 104, title: '京东京造 智能手表Pro 全面屏', imageUrl: 'https://dummyimage.com/200x200/EF476F/ffffff&text=京东手表', price: '799.00', sales: 9800 },
    ]
  }
});

// 当前激活的标签页
const activeTab = ref('brands');

// 根据当前标签页获取对应的商品列表
const currentProducts = computed(() => {
  return activeTab.value === 'brands' ? props.brandsProducts : props.guessProducts;
});

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万';
  }
  return num.toString();
};

// 加入购物车
const addToCart = (product) => {
  // 这里可以添加加入购物车的逻辑
  console.log('加入购物车:', product.title);
  alert(`${product.title} 已加入购物车！`);
};

// 加载更多商品
const loadMoreProducts = () => {
  // 这里可以添加加载更多商品的逻辑
  console.log('加载更多商品');
};
</script>

<style scoped>
.recommendations {
  width: 320px;
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  height: fit-content;
  border: 1px solid var(--border-color);
}

/* 头部区域 */
.recommendations-header {
  margin-bottom: 20px;
}

.recommendations-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

/* 标签页 */
.recommendations-tabs {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.tab-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  position: relative;
  transition: color var(--transition-fast);
}

.tab-button:hover {
  color: var(--primary-color);
}

.tab-button.active {
  color: var(--primary-color);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* 推荐商品列表 */
.recommendations-list {
  margin-bottom: 16px;
}

/* 商品项 */
.product-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-item:last-child {
  border-bottom: none;
}

.product-item:hover {
  background-color: var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 0 -12px;
}

/* 商品图片 */
.product-image {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
  background-color: #f5f5f5;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.product-item:hover .product-img {
  transform: scale(1.05);
}

/* 折扣标签 */
.discount-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--error-color);
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-bottom-right-radius: var(--radius-md);
}

/* 商品信息 */
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

/* 商品标题 */
.product-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast);
}

.product-item:hover .product-title {
  color: var(--primary-color);
}

/* 商品元信息 */
.product-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.price {
  font-size: 16px;
  font-weight: 600;
  color: var(--error-color);
}

.sales {
  font-size: 12px;
  color: var(--text-muted);
}

/* 加入购物车按钮 */
.add-cart-btn {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  background-color: white;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.add-cart-btn:hover {
  background-color: var(--error-color);
  color: white;
  border-color: var(--error-color);
  transform: scale(1.05);
}

/* 加载更多 */
.load-more {
  text-align: center;
}

.load-more-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.load-more-btn:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .recommendations {
    width: 280px;
    padding: 16px;
  }
  
  .product-image {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 1024px) {
  .recommendations {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .recommendations-tabs {
    justify-content: space-around;
  }
  
  .product-image {
    width: 60px;
    height: 60px;
  }
  
  .product-title {
    font-size: 13px;
  }
  
  .price {
    font-size: 15px;
  }
}
</style>